<template>
  <div>
    <!-- 面包屑 -->
    <el-row>
      <my-breadcrumb level1="数据统计" level2="统计示图"></my-breadcrumb>
    </el-row>
    <!-- 报表 -->
    <el-row>
      <div class="echart echart1"></div>
      <div class="mid-line"></div>
      <div class="echart echart2"></div>
    </el-row>
  </div>
</template>

<script>
import MyBreadcrumb from '@/components/MyBreadcrumb'
import echarts from 'echarts'
export default {
  name: 'Reports',
  components: {
    MyBreadcrumb
  },
  data() {
    return {
      options1: {
        title: {
          text: '员工部门分布图示',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: []
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['35%', '55%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      options2: {
        title: {
          text: '设备部门分布图示',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: []
        },
        series: [
          {
            name: '2011年',
            type: 'bar',
            data: [],
            label: {
              normal: {
                position: 'right',
                show: true
              }
            },
            itemStyle: {
              color: '#127ab9',
              barBorderRadius: [0, 5, 5, 0]
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.getEchartsData(1, this.options1, document.querySelector('.echart1'))
    this.getEchartsData(2, this.options2, document.querySelector('.echart2'))
  },
  methods: {
    /**
     * @param type 图表类型
     * @param options 图表参数
     */
    async getEchartsData(type, options, dom) {
      const { data } = await this.$http('/reports/type/' + type)
      console.log(data)
      const { result } = data.data
      if (data.meta.status === 200) {
        if (type === 1) {
          options.legend.data = result.map(item => {
            return item.departname
          })
          options.series[0].data = result.map(item => {
            return {
              value: item.user_num,
              name: item.departname
            }
          })
        } else if (type === 2) {
          options.yAxis.data = result.map(item => {
            return item.departname
          })
          options.series[0].data = result.map(item => {
            return item.device_num
          })
        }

        echarts.init(dom).setOption(options)
      } else {
        this.$message.warning(data.meta.msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.echart {
  margin: 40px auto;
  width: 600px;
  height: 400px;
}
.mid-line {
  // width: 100%;
  height: 5px;
  background-color: #eeeeee;
  border-radius: 50%;
}
.title {
  text-align: center;
}
</style>
